<template>
  <!---------- 搜索表单区域 ----------->
  <SearchFormTemplate ref="searchRef" :searchConfig="searchConfig" />
  
  <!---------- 顶部按钮区域 ----------->
  <ToolbarTemplate :toolbarConfig="toolbarConfig" />

  <!---------- 表格区域 ----------->
  <TableTemplate ref="tableRef" :columns="columns" />
  
  <!-- 角色添加表单 -->
  <RoleAdd ref="addRef" @dataReload="getTableData" />

  <!-- 角色修改表单 -->
  <RoleEdit ref="editRef" @dataReload="getTableData" />

  <!-- 角色授权表单 begin -->
  <RoleAuthorization ref="authorizationRef" @dataReload="getTableData"/>

</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import SearchFormTemplate from '@/components/template/form/search-form-template.vue';// 搜索区模版
  import ToolbarTemplate from '@/components/template/button/toolbar-template.vue';// 操作区模版
  import TableTemplate from '@/components/template/table/table-template.vue';//分页表格模版

  import RoleAdd from '@/views/role/role_add.vue';//角色添加页
  import RoleEdit from '@/views/role/role_edit.vue';//角色添加页
  import RoleAuthorization from '@/views/role/role_authorization.vue';//角色授权页
  import { type CustomTableColumnType } from '@/types/table';//扩展 TableColumnType 定义

  /* [显示弹窗] 1.调用子组件显示添加窗体 */
  const onAdd = () => {
    addRef.value?.show();//调用子组件 显式弹窗方法
  };
  const addRef = ref<typeof RoleAdd | null>(null);//角色添加模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.接收传入的ID,2.调用子组件显示修改窗体 */
  const onEdit = (id: number) => {
    editRef.value?.show(id);//调用子组件 显示 弹窗方法
  };
  const editRef = ref<typeof RoleEdit | null>(null);//角色修改模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.接收传入的ID和权限值,2.调用子组件显示修改窗体 */
  const onAuthorization = (id: number,role_permission: string) => {
    const strArr = role_permission.split(',');
    authorizationRef.value?.show(id,strArr);//调用子组件 显式弹窗方法
  };
  const authorizationRef = ref<typeof RoleAuthorization | null>(null);//角色授权模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [获取表格数据] 1.调用 table-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async () => { 
    await tableRef.value?.getTableData(pageAction, pageParams);
  }; 
  const tableRef = ref<typeof TableTemplate | null>(null);//table-template组件引用，用与调用模态弹窗组件内部方法
  const pageAction = 'base.manage.role.ServiceImpl.page';//page接口 方法名
  const pageParams = { role_type: "3" };//page接口 参数,3:总后台角色
  
  onMounted(() => { getTableData(); }); //组件加载完成时，获取表格数据

  /* [按钮配置] */
  const toolbarConfig = [
    {
      text: '新建',
      type: 'primary',
      icon: 'add' as const,
      permission: 'role_add',
      onClick: onAdd
    }
  ];

  /* [搜索配置] */
  const searchConfig = [
    {title: '用户名称',dataIndex: 'account_name',type: 'input' as const,width: 150},
    {title: '账户状态',dataIndex: 'account_state',type: 'select' as const,
      options: [
        { label: '启用', value: 1 },
        { label: '禁用', value: 2 }
      ]
    },
    {title: '注册时间',dataIndex: 'reg_time',type: 'date-range' as const,width: 250}
  ];

  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [ 
    {title: '角色名称',fixed: 'left',dataIndex: 'role_name',width: 180,},
    {title: '角色类型',dataIndex: 'role_type',options: {3: '总后台', 4: '代理后台', 5: '商户'}},
    {title: '最小权限标识',dataIndex: 'default_role_flag',options: {1: '最小权限', 2: '否'}},
    {title: '备注',dataIndex: 'role_memo',width: 350,},
    {title: '角色排序',dataIndex: 'role_sort',width: 180,},
    {title: '操作',dataIndex: 'action',
      buttons: [
        {
          children: () => '修改',
          type: 'link',
          permission: 'role_edit',
          onClick: (record) => onEdit(record.role_id),
        },
        {
          children: () => '授权',
          type: 'link',
          permission: 'role_authorization',
          onClick: (record) => onAuthorization(record.role_id,record.role_permission),
        }
      ]
    }
  ]
</script>
<style lang="less" scoped>
</style>
